<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.big-wrap{
			overflow: hidden;
			width: 404px;
			height: 404px;
			/*border: 1px solid black;*/
			display: flex;
			margin: 0 auto;
			margin-top: 30px;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		.item{
			width: 100px;
			height: 100px;
			/*background-color: #0000FF;*/
			/*border: 1px solid black;*/
			border-radius: 25px;
		}
		.item:nth-of-type(odd){
			/*background-color: skyblue;*/
		}
		.num{
			width: 100px;
			text-align: center;
			font-size: 30px;
			line-height: 100px;
			position: absolute;
		}
		.Mask{
			height: 100%;
			background-color: yellow;
			border-radius: 20px;
			position: relative;
			transition: all .5s;
		}
		.MaskOut{
			opacity: 0;
			transition: all 0.5s;
		}
		.a{
			transform:translate3d(0,0,0);
			opacity:1;
			z-index:1;
		}
	</style>
	<body>
		<div class="big-wrap">
			<div class="item">
				<div class="num">1</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">5</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">2</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">4</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">1</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">5</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">7</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">2</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">8</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">7</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">4</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">6</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">6</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">8</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">3</div>
				<div class="Mask"></div>
			</div>
			<div class="item">
				<div class="num">3</div>
				<div class="Mask"></div>
			</div>
		</div>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
//		将.num的内容推送到数组中
//		比较数组的两个数相减是否为0,如果是,则不执行隐藏,如果否,则隐藏
//		
		var a = []
		var b = []
//		点击遮罩层隐藏
		$(".Mask").on("click",function(){
			$(this).css({"transform":"translate3d(-100px,-100px,0)","opacity":"0","z-index":"-100"})
		})
//		点击获取内容
		$(".item").on("click",function(){
//			将当前点击的元素的内容转为数字并且存放到变量numValue
			var numValue=Number($(this).children(".num").text())
			var value = $(this).children(".num").text()
//			当前点击元素下标存进b数组
			b.push($(this).index())
//			if(b[0]!=b[1]){
//			
//			}
			console.log("判断b",b)
			var c = b
//			判断数组的长度小于二
			
			if(b.length<2){
				if(a.length<2){
					a.push(numValue)
				}else{
					a = []
				}
			}
//			a数组长度为2时清空数组
			
			if(b.length == 2){
				//				相同下标就清空
				if(b[0] != b[1]){
					a.push(numValue)
				}
				if(a[0]-a[1] != 0){
					setTimeout(function(){
						console.log("c:",c)
						$(".Mask").eq(c[0]).css({"transform":"translate3d(0,0,0)","opacity":"1","z-index":"1"})
						$(".Mask").eq(c[1]).css({"transform":"translate3d(0,0,0)","opacity":"1","z-index":"1"})
					},500)
				}
				if(a.length == 2){
					console.log("a",a)
					a = []
				}
				console.log("b",b)
				b=[]
			}
		})
		
		
	</script>
</html>
